import React from 'react';
import {inject, observer} from 'mobx-react';
import {Checkbox} from 'antd';

import './style.css';
import E9MultiLang from '../e9login/E9MultiLang';
import E9QRCode from '../e9login/E9QRCode';

@inject("portalLoginStore")
@observer
class E6Login extends React.Component {
    constructor(props) {
        super(props);
        this.getLoginForm = this.getLoginForm.bind(this);
        this.onLabelClick = this.onLabelClick.bind(this);
        this.onInputChange = this.onInputChange.bind(this);
        this.onLogin = this.onLogin.bind(this);
    }

    componentDidMount() {
        const {portalLoginStore} = this.props;
        portalLoginStore.onWindowResize();
        portalLoginStore.getLoginForm();
    }

    render() {
        const {portalLoginStore} = this.props;
        const {labelObj, state, setState, setStateAndCache, onPasswordForget, onRememberChange, onValidateCodeChange} = portalLoginStore;
        const {
            logoImage,
            bgImage,
            isRememberPW,
            isRememberAccount,
            isRememberPassword,
            cacheAccount,
            cachePassword,
            langId,
            loginType,
            loginFormItems,
            loginFormHiddenItems,
            loginSetting = {},
            validateCode
        } = state;
        const {needforgotpassword} = loginSetting;

        let logoImgSrc = '/images_face/login/weaverlogo_wev8.gif';
        if (logoImage) {
            logoImgSrc = logoImage.split(',')[0];
        }

        let bgImageSrc = '/images_face/login/loginLanguage_wev8.jpg';
        if (bgImage) {
            bgImageSrc = bgImage;
        }

        return (
            <div id="LoginContainer" className="e6login-container" onClick={() => setState({multiLangVisible: false})}>
                <div className="e6login-logo">
                    <img src={logoImgSrc} alt=""/>
                </div>
                <div className='e6login-area'>
                    <div className='e6login-bg-image' style={{backgroundImage: 'url(' + bgImageSrc + ')'} }></div>
                    <div className="e6login-form">
                        <div className="e6login-form-multiLang">
                            <E9MultiLang color="#fff"/>
                            {loginType == 'form' ? <i className="icon-coms-Scan" title="扫码登录" onClick={() => setStateAndCache('loginType', 'QRCode')}/> : <i className="icon-coms-Revoke2" title="返回" onClick={() => setStateAndCache('loginType', 'form')}/>}
                        </div>
                        {loginType == 'form' ? (
                                <div style={{marginTop: '18px'}}>
                                    {
                                        loginFormItems.map((item, index) => {
                                            let defaultValue = '';
                                            if (item.atype == 'account') {
                                                defaultValue = cacheAccount;
                                            } else if (item.atype == 'password') {
                                                defaultValue = cachePassword;
                                            }

                                            let itemComp = (
                                                <div key={index} className="e6login-form-item">
                                                    <label className={`e6login-form-label ${defaultValue ? 'e6login-display-hidden' : ''}`} onClick={this.onLabelClick}>{item.label}</label>
                                                    <input
                                                        type={item.type}
                                                        id={item.id}
                                                        name={item.name}
                                                        autoComplete="off"
                                                        className="e6login-form-input"
                                                        defaultValue={defaultValue}
                                                        onChange={this.onInputChange}
                                                        onBlur={e => item.atype == 'account' ? this.getLoginForm() : ''}
                                                    />
                                                </div>
                                            );

                                            if (item.atype == 'validatecode') {
                                                itemComp = (
                                                    <div key={index} className="e6login-form-item">
                                                        <label className="e6login-form-label e6login-form-label-vc" onClick={this.onLabelClick}>{item.label}</label>
                                                        <input type={item.type} id={item.id} name={item.name} className="e6login-form-input e6login-form-input-vc" onChange={this.onInputChange}/>
                                                        <div className="e6login-form-vc-img">
                                                            <img src={validateCode} alt="" onClick={onValidateCodeChange}/>
                                                        </div>
                                                    </div>
                                                );
                                            }

                                            return itemComp;
                                        })
                                    }
                                    {
                                        loginFormHiddenItems.map((item, index) => {
                                            return <div key={index} style={{display: 'none'}} dangerouslySetInnerHTML={{__html: item.html}}></div>;
                                        })
                                    }
                                    <div className="e6login-form-remember">
                                        <div className={`e6login-form-remember-content ${isRememberPW == '1' ? '' : 'e6login-display-hidden'}`}>
                                            <div className={`e6login-form-remember-account`} title={labelObj.rememberAccount}>
                                                <Checkbox checked={isRememberAccount} onChange={(e) => onRememberChange('account', e.target.checked)}>{labelObj.rememberAccount}</Checkbox>
                                            </div>
                                            <div className={`e6login-form-remember-password`} title={labelObj.rememberPassword}>
                                                <Checkbox checked={isRememberPassword} onChange={(e) => onRememberChange('password', e.target.checked)}>{labelObj.rememberPassword}</Checkbox>
                                            </div>
                                        </div>
                                        <div className="e6login-form-clear"></div>
                                    </div>
                                    <div className="e6login-form-item" style={isRememberPW != '1' ? {marginTop: '10px'} : {}}>
                                        {
                                            needforgotpassword == '1' && (
                                                <div className="e6login-form-forget" title={labelObj.forgetPassword}>
                                                    <span onClick={() => onPasswordForget()}>{labelObj.forgetPassword}</span>
                                                </div>
                                            )
                                        }
                                        <div className="e6login-form-submit">
                                            <input type="submit" id="submit" name="submit" value={labelObj.login} onClick={this.onLogin}/>
                                        </div>
                                    </div>
                                </div>
                            ) : <E9QRCode size={99} color="#000"/>
                        }
                    </div>
                </div>
            </div>
        );
    }

    getLoginForm() {
        const {portalLoginStore} = this.props;
        portalLoginStore.getLoginForm();
    }

    onLabelClick(e) {
        jQuery(e.target.parentNode).find('input').focus();
    }

    onInputChange(e) {
        if (e.target.value) {
            jQuery(e.target.parentNode).find('.e6login-form-label').addClass('e6login-display-hidden');
        } else {
            jQuery(e.target.parentNode).find('.e6login-form-label').removeClass('e6login-display-hidden');
        }
    }

    onLogin() {
        const {portalLoginStore} = this.props;
        portalLoginStore.onLogin();
    }
}

export default E6Login;